import { onMounted } from "vue";
import { ref,nextTick } from "vue";
import { FlyTo } from "./useFlyTo";
import { CityLayer } from "./useCityLayer";
import { getWeatherData } from './useWeatherDate';

// 导入仓库

import {CStore} from '../../stores/counter'
const $store = CStore()


// 此Hook的功能:用于调用中地接口导入地图
export const useMap = ()=> {
    const map = ref(null)
    const view = ref(null)
    onMounted(()=> {
        
            // 矢量图层
        var gaodeMapLayer = new ol.layer.Tile({
            title: "高德地图矢量图层",
            source: new ol.source.XYZ({
            url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
            wrapX: false,
            crossOrigin: "Anonymous"
            })
            });


        // 影像图层
        var image = new ol.layer.Tile({
        title: "高德地图影像图层",
        source: new ol.source.XYZ({
            url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
            wrapX: false,
            crossOrigin: "Anonymous"

        })
        })

        // 注记图层
        var zhuji = new ol.layer.Tile({
        title: "高德地图影像注记图层",
        source: new ol.source.XYZ({
            url: "http://webst02.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
            wrapX: false,
            crossOrigin: "Anonymous"
        })
        })

         map.value = new ol.Map({
            target: "map",
            layers: [gaodeMapLayer,image, zhuji],
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [114.30, 30.50],
                zoom: 3
            })
        })
    }) 

    nextTick(()=>{
        // 实现飞行视角并加载地块阴影
         view.value = map.value.getView()
        if($store.currentCityDate.name == '') {
            
            setTimeout(()=>{
              /*   FlyTo(view.value,$store.locationCity.location)
                CityLayer(map.value,$store.locationCity.adcode) */
            
            },200)
           
        } else {
            setTimeout(()=>{
                // FlyTo(view,$store.currentCityDate.location)
                // CityLayer(map.value,$store.currentCityDate.adcode)
        
            },200)
           
        }
        
    })

    return { map,view}

}